<template>
  <div class="homePage">
    <!-- header -->
    <div class="home_header">
      <van-nav-bar title="智慧商城" fixed/>
    </div>
    <div class="home_content">
      <!-- 搜索框 -->
      <div class="home_search">
        <van-search
          placeholder="搜索你要的商品"
          @click="$router.push('/search')"
        />
      </div>
      <!-- 轮播区 -->
      <div class="home_slide">
        <!-- 轮播照片 -->
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item  v-for="item in slideList" :key="item.imgUrl">
            <img :src="item.imgUrl" height="100%" width="100%">
          </van-swipe-item>
        </van-swipe>
        <!-- 轮播通知 -->
        <van-notice-bar
          left-icon="volume-o"
          text="好消息！好消息！美国投降了！伟大的共产主义国家迎来胜利！"
        />
      </div>
      <!-- 活动展示 -->
      <div class="home_display">
        <van-grid :column-num="5">
          <van-grid-item v-for="item in displayList" :key="item.imgUrl"
          :icon="item.imgUrl"
          :text="item.text"
          @click="$router.push('/catagory')"
          />
        </van-grid>
        <div class="display_other">
          <img :src="this.otherDisplay.imgUrl">
        </div>
        <p>————猜你喜欢————</p>
      </div>
      <!-- 具体商品 -->
      <goodsDetail v-for="item in goodsList"
        :key="item.goods_id"
        :item="item">
      </goodsDetail>
    </div>
  </div>
</template>

<script>
import goodsDetail from '@/components/goodsDetail.vue'
import { getGoods } from '@/api/home'
export default {
  name: 'HomeIndex',
  components: {
    goodsDetail
  },
  data () {
    return {
      slideList: '', // 轮播图
      displayList: '', // 展示图
      otherDisplay: '',
      goodsList: '' // 商品图
    }
  },
  async created () {
    const { data: { pageData } } = await getGoods()
    this.slideList = pageData.items[1].data
    // console.log(this.slideList)
    this.displayList = pageData.items[3].data
    this.otherDisplay = pageData.items[4].data[0]
    // console.log(this.otherDisplay)
    this.goodsList = pageData.items[6].data
    // console.log(this.goodsList)
  }
}
</script>

<style scoped>
  .home_header .van-nav-bar{
    background-color: #c00000;
  }
  ::v-deep .van-nav-bar__title{
    color: white;
  }
  .home_content{
    padding-top: 46px;
    padding-bottom: 50px;
  }
  .home_slide .van-swipe-item {
    height: 300px;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .home_slide .van-notice-bar{
    font-size: 18px;
    background-color: #777;
    color: red;
  }
  .home_display p{
    font-size: 20px;
    text-align: center;
  }
  .display_other img{
    width: 100%;
    margin-top: 5px;
  }
</style>
